<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
    <link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/font-awesome.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/good.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"
          rel="stylesheet">
    <style>
        #page-wrapper h1 {
            display: block;
            margin-bottom: 20px;
            border-bottom: 1px solid #999;
            font-size: 16px;
            padding-left: 2px;
            font-weight: bold;
            line-height: 35px;
        }
        #page-wrapper h1 em{ font-size: 14px; color: #999; margin-left: 50px; font-weight: normal; font-style: normal;}
        #fileValue {
            opacity: 0;
            width: 0px;
            height: 0px;
            font-size: 0px;
        }
        #file {
            display: inline-block;
        }
        #fileValue{ width: 0; height: 0; opacity: 0; font-size: 0;}
        #myTable{ font-size: 14px;}
        .input-file-edit,.input-file-edit input{ width: 100%; height: 100%;}
        .pro-box{ position: relative;}
        .pro-type-tit{ display: inline-block; width: 22px; line-height: 22px; border-radius: 50%; margin-right: 10px; background-color: #ccc; text-align: center; font-weight: bold; color: #fff;}
        .remove-btn{ position: absolute; top: 0; left: 50%; z-index: 300; width: 30px; line-height: 30px; border-radius: 50%; margin-right: 12px; background-color: #ccc; text-align: center; font-weight: bold; color: #fff;}
        .add-btn{ cursor: pointer;}
        .add-btn b{ display: inline-block; width: 30px; line-height: 30px; border-radius: 50%; margin-right: 12px; background-color: #ccc; text-align: center; font-weight: bold; color: #fff;}
        .choose-btn{ display: inline-block; padding: 0 12px; line-height: 34px; background-color: #D7D7D7; cursor: pointer; border-radius: 5px; text-align: center; font-size: 14px;}
        .choose-tip-bg{ display: none;}
        .sale-type label{ margin: 7px 10px 0 0; _display: inline;}
        .pro-name{ float: left; max-width: 350px; border: none; box-shadow: none; line-height: 160%; background: none;}
    </style>
</head>
<body>

<div id="page-wrapper">
    <div class="panel panel-f5">
        <div class="panel-body row">
            <h1>● 基础信息</h1>
            <form id="Form" class="form-horizontal" method="post">
                <input type="hidden" id="_ctx" value="${basePath}"/>
                <input v-if="id" type="hidden" name="agentProtocolDto.id" v-model="agentProtocolDto.id">
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font color="red">*</font>&nbsp;类型：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input v-if="agentProtocolDto.systemId" class="form-control" type="text" v-model="agentProtocolDto.systemName" readonly>
                        <input type="hidden" name="agentProtocolDto.systemId" v-model="agentProtocolDto.systemId" readonly>
                        <span v-if="agentProtocolDto.systemId" class="choose-btn" @click="agentProtocolDto.systemId=null">重置</span>
                        <span v-else class="choose-btn" @click="layType=1,tipFlag=true">选择</span>
                        <span class="text-warning">签约该协议后成为的代理商类型</span>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font color="red">*</font>&nbsp;协议名称：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="50" name="agentProtocolDto.name" maxlength="50" v-model="agentProtocolDto.name" placeholder="最多输入50字">
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">协议签约价：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="30" name="agentProtocolDto.price" maxlength="10" v-model="agentProtocolDto.price" @input="checkTotalValue"> 元
                        <span class="text-warning">如果该协议免费签约，无需填写签约价</span>
                        <span v-if="totalValueFlag" class="verify-tip" style="display: block">协议签约价不能小于当前佣金总和</span>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">&nbsp;<font color="red">*</font>&nbsp;协议封面：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input v-if="id" class="obj-input" name="agentProtocolDto.cover" type="text" v-model="agentProtocolDto.cover">
                        <input v-else class="obj-input" name="agentProtocolDto.cover" type="text">
                        <img v-if="agentProtocolDto.cover" class="obj-img" :src="agentProtocolDto.cover" width="100" height="100">
                        <img v-else class="obj-img" src="" style="display:none" width="100" height="100">
                        <span v-if="agentProtocolDto.cover" class="input-file-edit">
                            <input type="file" data-action="goods" data-image="agentProtocolDto.cover"
                                   onchange="uploadImg(this)">
                        </span>
                        <span v-else class="input-file">
                            <input type="file" data-action="goods" data-image="agentProtocolDto.cover"
                                   onchange="uploadImg(this)">
                        </span>
                        <span class="text-warning">封面图大小不能超过3MB，为了图片清晰美观，建议上传宽度730像素的图片。</span>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font color="red">*</font>&nbsp;选择产品：</span>
                    <div class="col-sm-9 col-xs-8">
                        <span v-if="curProName.length > 0" class="form-control pro-name" v-text="curProName.join(',')"></span>
                        <input v-for="(item,index) in curProId" type="hidden" :name="'agentProtocolProductDtoList['+index+'].productId'" v-model="item">
                        <span v-if="curProId.length > 0" class="choose-btn" @click="proFlag=true">继续绑定</span>
                        <span v-if="curProId.length > 0" class="choose-btn" @click="proReset">重置</span>
                        <span v-else class="choose-btn" @click="proFlag=true">选择</span>
                        <span class="text-warning">每个协议下必须含有产品，请选择对应的产品。</span>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font color="red">*</font>&nbsp;协议开放体系：</span>
                    <div class="col-sm-9 col-xs-8">
                        <span v-if="tipOpenName.length > 0" class="form-control pro-name" v-text="tipOpenName.join(',')"></span>
                        <input type="hidden" v-for="(item,index) in openIdArr" :name="'agentProtocolSystemDtoList['+index+'].systemId'" v-model="item">
                        <span v-if="openIdArr && openIdArr.length>0" class="choose-btn" @click="layType=2,tipFlag=true">重选</span>
                        <span v-else class="choose-btn" @click="layType=2,tipFlag=true">选择</span>
                        <span class="text-warning">请设置可以销售该协议的体系</span>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font color="red">*</font>&nbsp;是否可销售汽摩券：</span>
                    <div class="col-sm-9 col-xs-8 sale-type">
                        <label><input type="radio" name="agentProtocolDto.type" value="1" :checked="agentProtocolDto.type==2 ? '' : 'checked'"> 是</label>
                        <label><input type="radio" name="agentProtocolDto.type" value="2" :checked="agentProtocolDto.type==2 ? 'checked' : ''"> 否</label>
                    </div>
                </div>

                <h1>● 详细描述</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">产品介绍：</span>
                    <div class="col-sm-9 col-xs-8 add-box image-text">
                        <div class="btn-box first-btn-box">
                            <input class="firstText" name="firstText" value="+ 文字" type="button" @click="addText(1)">
                            <input class="firstImg" name="firstImg" value="+ 图片" type="button" @click="addImg(1)">
                        </div>
                        <div class="text-box" v-for="(item,index) in dataObj.agentProtocolImageTextDtoList" :key="item.id" :id="item.id">
                            <div v-if="item.type==1">
                                <textarea :name="'agentProtocolImageTextDtoList['+index+'].path'" maxlength="200" rows="3"
                                          cols="50" class="form-control" placeholder="最多输入200字">{{item.path}}</textarea>
                                <input class="sort" :name="'agentProtocolImageTextDtoList['+index+'].sort'" v-model="index" type="hidden"/>
                                <input :name="'agentProtocolImageTextDtoList['+index+'].type'" value="1" type="hidden"/>
                                <input v-if="item.id" :name="'agentProtocolImageTextDtoList['+index+'].id'" v-model="item.id" type="hidden"/>
                                <input v-if="item.productId" :name="'agentProtocolImageTextDtoList['+index+'].productId'" v-model="item.productId" type="hidden"/>
                            </div>
                            <div v-if="item.type==2" class="upload-box">
                                <input v-if="id && item.path" class="obj-input" :name="'agentProtocolImageTextDtoList['+index+'].path'" v-model="item.path" type="hidden">
                                <input v-else class="obj-input" :name="'agentProtocolImageTextDtoList['+index+'].path'" v-model="item.path" type="hidden">
                                <img class="obj-img" :src="item.path">
                                <span v-if="id && item.path" class="input-file-edit">
                                    <input type="file" @change="vueImg($event,'goods',index)">
                                </span>
                                <span v-else :class="item.path ? 'input-file-edit' : 'input-file'">
                                    <input type="file" @change="vueImg($event,'goods',index)">
                                </span>
                                <input class="sort" :name="'agentProtocolImageTextDtoList['+index+'].sort'" v-model="index" type="hidden"/>
                                <input :name="'agentProtocolImageTextDtoList['+index+'].type'" value="2" type="hidden"/>
                                <input v-if="item.id" :name="'agentProtocolImageTextDtoList['+index+'].id'" v-model="item.id" type="hidden"/>
                                <input v-if="item.productId" :name="'agentProtocolImageTextDtoList['+index+'].productId'" v-model="item.productId" type="hidden"/>
                            </div>
                            <div class="btn-box">
                                <input class="addText" name="addText" value="+ 文字" type="button" @click="addText(2,index)">
                                <input class="addImg" name="addImg" value="+ 图片" type="button" @click="addImg(2,index)">
                                <input class="remove" name="remove" value="X 删除" type="button" @click="removeBox(2,index)">
                            </div>
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span"><font
                            color="red">*</font>&nbsp;合同名称：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="50" name="agentProtocolDto.contractName" maxlength="50"
                               placeholder="最多输入50字" v-model="agentProtocolDto.contractName">
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span"><font
                            color="red">*</font>&nbsp;上传合同：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input v-if="id" type="text" id="fileText" class="form-control" size="50" v-model="agentProtocolDto.contractUrl" readonly />
                        <input v-else type="text" id="fileText" class="form-control" size="50" readonly />
                        <input type="file" data-action="office" data-image="word" onchange="uploadFile(this,'.docx',10)" id="file">
                        <input v-if="id" type="text" id="fileValue" name="agentProtocolDto.contractUrl" v-model="agentProtocolDto.contractUrl">
                        <input v-else type="text" id="fileValue" name="agentProtocolDto.contractUrl">
                        <span class="text-warning text">请上传不超过10MB*.docx格式的标准文档</span>
                    </div>
                </div>
                <hr/>
                <div class="form-group">
					<span class="control-label col-sm-2 col-xs-4 detail-span"><span
                            class="text-red"></span> 备注：</span>
                    <div class="col-sm-10 col-xs-8 add-box">
                        <div class="text-box">
                            <textarea data-id="0" name='agentProtocolDto.remark' id="remark" v-text="agentProtocolDto.remark"
                                      class="form-control" maxlength="1000" placeholder="最多输入1000字"></textarea>
                        </div>
                    </div>
                </div>

                <h1>● 签约协议额外赠送</h1>
                <div class="pro-box" v-for="(item, index) in dataObj.agentProductProjectDtoList">
                    <div v-if="index > 0" class="remove-btn" @click="removeType(index)">X</div>
                    <input v-if="id" type="hidden" :name="'agentProductProjectDtoList['+index+'].serialId'" v-model="item.serialId">
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><b class="pro-type-tit" v-html="index+1"></b>类型：</span>
                        <div class="col-sm-9 col-xs-8">
                            <select class="form-control" :name="'agentProductProjectDtoList['+index+'].projectId'" v-model="item.projectId">
                                <option value="" selected>无</option>
                                <option v-for="item in proType" :value="item.id" v-text="item.name"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" v-if="item.projectId">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><font
                                color="red">*</font>&nbsp;数量：</span>
                        <div class="col-sm-9 col-xs-8">
                            <input class="form-control" type="text" :name="'agentProductProjectDtoList['+index+'].containNum'" maxlength="10" v-model="item.containNum" @input="checkNum($event,index,0)">
                            <span v-if="item.proFlag[0]" class="verify-tip" style="display: block;">请输入正确的数量</span>
                        </div>
                    </div>
                    <div class="form-group" v-if="item.projectId==10">
                        <span class="control-label col-sm-2 col-xs-4 detail-span">规格：</span>
                        <div class="col-sm-9 col-xs-8">
                            <select class="form-control" :name="'agentProductProjectDtoList['+index+'].specId'" v-model="item.specId">
                                <option v-for="item in proSpec" :value="item.motorcycleId" v-text="item.motorcycleName"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" v-if="item.projectId==11">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><font
                                color="red">*</font>&nbsp;规格：</span>
                        <div class="col-sm-9 col-xs-8">
                            <input class="form-control" type="text" :name="'agentProductProjectDtoList['+index+'].price'" maxlength="10" v-model="item.price" @input="checkNum($event,index,1)">
                            <span v-if="item.proFlag[1]" class="verify-tip" style="display: block;">请输入正确的整数</span>
                        </div>
                    </div>
                    <div class="form-group" v-if="item.projectId==10 || item.projectId==9 || item.projectId==11">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><font
                                color="red">*</font>&nbsp;有效期设置：</span>
                        <div class="col-sm-9 col-xs-8">
                            自购买日起 <input type="text" class="form-control" :name="'agentProductProjectDtoList['+index+'].intervalDays'" maxlength="10" v-model="item.intervalDays" placeholder="留空为立即生效" @input="checkNum($event,index,3)"> 天生效，
                            有效期 <input type="text" class="form-control" :name="'agentProductProjectDtoList['+index+'].validTime'" maxlength="4" v-model="item.validTime" @input="checkNum($event,index,2)"> 天
                            <span v-if="item.proFlag[2]" class="verify-tip" style="display: block;">请输入正确的有效期</span>
                            <span v-if="item.proFlag[3]" class="verify-tip" style="display: block;">生效日留空或者输入整数</span>
                        </div>
                    </div>
                    <div class="form-group" v-if="item.projectId">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"></span>
                        <div class="col-sm-9 col-xs-8">
                            <select class="form-control" :name="'agentProductProjectDtoList['+index+'].type'" v-model="item.type">
                                <option value="0">固定项</option>
                                <option value="1">单选项</option>
                            </select>
                            <span class="text-warning">固定项表示用户购买产品时固定送的东西，选择项则是需要用户自行选择某样东西。</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span"></span>
                    <div class="col-sm-9 col-xs-8">
                        <div class="add-btn" @click="addType"><b>+</b>新增类型</div>
                    </div>
                </div>

                <h1>● 返现设置<em>本项设置签约该协议后是否给予返现，没有返现请不填</em></h1>
                <div class="pro-box" v-for="(item, index) in dataObj.agentProtocolYieldRatioDtoList">
                    <div v-if="index > 0" class="remove-btn" @click="removeBack(index)">X</div>
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span"><b class="pro-type-tit" v-text="index+1"></b>返现时间：</span>
                        <div class="col-sm-9 col-xs-8">
                            <input class="form-control" type="text" :name="'agentProtocolYieldRatioDtoList['+index+'].cashbackTime'" maxlength="10" v-model="item.cashbackTime" @input="checkTime($event,index,0)"> 天
                            <span class="text-warning">请输入返现总天数</span>
                            <span v-if="item.ratioFlag[0]" class="verify-tip" style="display: block;">请输入正确的整数</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span">返现比：</span>
                        <div class="col-sm-9 col-xs-8">
                            <input class="form-control" type="text" :name="'agentProtocolYieldRatioDtoList['+index+'].cashbackRatio'" maxlength="10" v-model="item.cashbackRatio" @input="checkRatio($event,index,1)"> %
                            <span class="text-warning">请输入返现比例</span>
                            <span v-if="item.ratioFlag[1]" class="verify-tip" style="display: block;">请输入最多两位小数的比例</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4 detail-span">设置提现期限：</span>
                        <div class="col-sm-9 col-xs-8">
                            <input class="form-control" type="text" :name="'agentProtocolYieldRatioDtoList['+index+'].cashbackWithdrawal'" maxlength="10" v-model="item.cashbackWithdrawal" @input="checkWithdrawal($event,index,2)"> 天
                            <span class="text-warning">达到设置天数后才可提现</span>
                            <span v-if="item.ratioFlag[2]" class="verify-tip" style="display: block;">请输入正确的整数</span>
                            <span v-if="item.yieldFlag" class="verify-tip" style="display: block;">请设置完整的返现</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span"></span>
                    <div class="col-sm-9 col-xs-8">
                        <div class="add-btn" @click="addBack"><b>+</b>新增返现</div>
                    </div>
                </div>

                <h1>● 首次及销售分佣设置</h1>
                <div v-if="agentProtocolDto.price > 0" class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">首次分佣设置：</span>
                    <div class="col-sm-9 col-xs-8">
                        <div v-for="(item,index) in dataObj.agentProtocolCommissionDtoList" class="firstCent-li" v-if="item.type==1">
                            <span class="tit">{{item.systemName}}：</span>
                            <input type="hidden" :name="'agentProtocolCommissionDtoList['+index+'].systemId'" v-model="item.systemId">
                            <input type="hidden" :name="'agentProtocolCommissionDtoList['+index+'].type'" value="1">
                            佣金：<input class="form-control" type="text" :name="'agentProtocolCommissionDtoList['+index+'].value'" v-model="item.value" @input="checkTotalValue(index)"/>
                            <select class="form-control" :name="'agentProtocolCommissionDtoList['+index+'].mode'" v-model="item.mode" @change="checkTotalValue(index)">
                                <option value="1">%</option>
                                <option value="2">元</option>
                            </select>
                            <span class="add-btn" @click="removeCent(index,item.systemId)"><b>X</b></span>
                            <#--<span v-else class="add-btn" @click="layType=3,tipFlag=true"><b>+</b></span>-->
                            <span v-if="item.valueFlag" class="verify-tip" style="display: block">请输入正确的佣金</span>
                        </div>
                        <span v-if="totalValueFlag" class="verify-tip" style="display: block">当前佣金总和不能大于协议签约价</span>
                        <span class="choose-btn" @click="layType=3,tipFlag=true">选择分佣体系</span>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span"><font color="red">*</font>&nbsp;销售分佣设置：</span>
                    <div class="col-sm-9 col-xs-8">
                        <div class="choose-cent-box">
                            <input type="radio" name="" value="0" v-model="centType"> 无
                        </div>
                        <div class="choose-cent-box">
                            <input type="radio" name="" value="1" v-model="centType"> 固定模式
                            <div v-if="centType==1 && item.type==2 && item.pattern==1 && index>(num-1)" v-for="(item,index) in dataObj.agentProtocolCommissionDtoList" class="firstCent-li">
                                <span class="tit">{{item.systemName}}：</span>
                                <input type="hidden" :name="'agentProtocolCommissionDtoList['+index+'].systemId'" v-model="item.systemId">
                                <input type="hidden" :name="'agentProtocolCommissionDtoList['+index+'].type'" value="2">
                                <input type="hidden" :name="'agentProtocolCommissionDtoList['+index+'].pattern'" value="1">
                                佣金：<input class="form-control" type="text" :name="'agentProtocolCommissionDtoList['+index+'].value'" v-model="item.value" @input="checkValue(index)" />
                                <select class="form-control" :name="'agentProtocolCommissionDtoList['+index+'].mode'" v-model="item.mode">
                                    <option value="1">%</option>
                                    <option value="2">元</option>
                                </select>
                                <span class="add-btn" @click="removeCent(index,item.systemId)"><b>X</b></span>
                                <#--<span v-else class="add-btn" @click="layType=3,tipFlag=true"><b>+</b></span>-->
                                <span v-if="item.valueFlag" class="verify-tip" style="display: block">请输入正确的佣金</span>
                            </div>
                            <span v-if="centType==1" class="choose-btn" style="margin-left: 22px;" @click="layType=4,tipFlag=true">选择分佣体系</span>
                        </div>
                        <div class="choose-cent-box">
                            <div class="cent-tit">
                                <input type="radio" name="" value="2" v-model="centType"> 升级模式
                            </div>
                            <div v-if="centType==2" class="cent-ul" v-for="(itemArr,index) in promoteList">
                                <div class="cent-li">
                                    代理商累计销售额在：
                                    <input type="hidden" :name="'agentPromoteCommissionDtoList['+index+'].agentPromoteDto.promoteType'" v-model="index">
                                    <input v-if="index==(promoteList.length-1)" class="form-control" type="text" :name="'agentPromoteCommissionDtoList['+index+'].agentPromoteDto.lowMoney'" v-model="itemArr.saleDto.lowMoney" @input="checkTipFlag(index)"> 元 ~
                                    <input v-else class="form-control" type="text" :name="'agentPromoteCommissionDtoList['+index+'].agentPromoteDto.lowMoney'" v-model="itemArr.saleDto.lowMoney" readonly> 元 ~
                                    <input v-if="index==(promoteList.length-1)" class="form-control" type="text" :name="'agentPromoteCommissionDtoList['+index+'].agentPromoteDto.highMoney'" v-model="itemArr.saleDto.highMoney" @input="checkShowFlag(index)"> 元
                                    <input v-else class="form-control" type="text" :name="'agentPromoteCommissionDtoList['+index+'].agentPromoteDto.highMoney'" v-model="itemArr.saleDto.highMoney" readonly> 元
                                </div>
                                <span v-if="index==0" class="add-btn" @click="addCentBox"><b>+</b></span>
                                <span v-else class="add-btn" @click="removeCentBox(index)"><b>X</b></span>
                                <span v-if="itemArr.tipFlag" class="verify-tip" style="display: block">销售额区间最大值要大于最小值</span>
                                <span v-if="itemArr.tipShow" class="verify-tip" style="display: block">销售额区间最小值要大于前一阶段的值</span>
                                <span v-if="itemArr.minValueFlag" class="verify-tip" style="display: block">请输入正确的销售额</span>
                                <span v-if="itemArr.maxValueFlag" class="verify-tip" style="display: block">请输入正确的销售额</span>

                                <div v-for="(item,i) in itemArr.centList" class="firstCent-li">
                                    <span class="tit">{{item.systemName}}：</span>
                                    <input type="hidden" :name="'agentPromoteCommissionDtoList['+index+'].agentProtocolCommissionDtoList['+i+'].systemId'" v-model="item.systemId">
                                    <input type="hidden" :name="'agentPromoteCommissionDtoList['+index+'].agentProtocolCommissionDtoList['+i+'].type'" value="2">
                                    <input type="hidden" :name="'agentPromoteCommissionDtoList['+index+'].agentProtocolCommissionDtoList['+i+'].pattern'" value="2">
                                    <input type="hidden" :name="'agentPromoteCommissionDtoList['+index+'].agentProtocolCommissionDtoList['+i+'].promoteType'" v-model="index">
                                    佣金：<input class="form-control" type="text" :name="'agentPromoteCommissionDtoList['+index+'].agentProtocolCommissionDtoList['+i+'].value'" v-model="item.value" @input="checkPromote(index)" />
                                    <select class="form-control" :name="'agentPromoteCommissionDtoList['+index+'].agentProtocolCommissionDtoList['+i+'].mode'" v-model="item.mode">
                                        <option value="1">%</option>
                                        <option value="2">元</option>
                                    </select>
                                    <span class="add-btn" @click="removeNewCent(index,i)"><b>X</b></span>
                                    <span v-if="item.valueFlag" class="verify-tip" style="display: block">请输入正确的佣金</span>
                                </div>

                                <div><span class="choose-btn" @click="addNewCent(index)">选择分佣体系</span></div>
                            </div>
                        </div>
                        <span class="text-warning" style="display: block">这里是设置代理商从平台销售掉的每一笔订单，相应参与分佣人所获得的佣金</span>
                    </div>
                </div>


                <h1>● 分享设置</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">分享标签图：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input v-if="id" class="obj-input" name="agentProtocolDto.sharePhoto" v-model="agentProtocolDto.sharePhoto" type="text">
                        <input v-else class="obj-input" name="agentProtocolDto.sharePhoto" type="text">
                        <img v-if="agentProtocolDto.sharePhoto" class="obj-img" :src="agentProtocolDto.sharePhoto" width="100" height="100">
                        <img v-else class="obj-img" src="" style="display:none" width="100" height="100">
                        <span v-if="agentProtocolDto.sharePhoto" class="input-file-edit">
                            <input type="file" data-action="goods" data-image="sharePhoto"
                                   onchange="uploadImg(this)">
                        </span>
                        <span v-else class="input-file">
                            <input type="file" data-action="goods" data-image="sharePhoto"
                                   onchange="uploadImg(this)">
                        </span>
                        <span class="text-warning">标签图大小不能超过3MB，请使用jpg、png、bmp格式，为了图片清晰美观，请上传100*100像素的图片。</span>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">分享标题：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="50" name="agentProtocolDto.shareTitle" maxlength="30" v-model="agentProtocolDto.shareTitle"
                               placeholder="请用简洁的文字描述标题">
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span">标签内容：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="50" name="agentProtocolDto.shareContent" maxlength="50" placeholder="请用简洁语言描述标签分享的内容" v-model="agentProtocolDto.shareContent">
                    </div>
                </div>

                <hr>
                <div class="form-group">
                    <span class="control-label col-sm-4 col-xs-4"></span>
                    <div class="col-sm-8 col-xs-8">
                        <button type="button" class="btn btn-success" @click="submitForm"><i class="fa fa-check"></i> 提交
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!--类型弹窗-->
    <div class="choose-tip-bg" :style="tipFlag ? 'display:block' : 'display:none'">
        <div class="choose-tip-box">
            <div class="tit"><b v-if="layType==1">选择类型</b><b v-else>选择体系</b><span @click="tipFlag=false,tipOpenFlag=false">关闭</span></div>
            <div class="select-type-ul">
                <div v-if="layType==1" v-for="item in typeArr" class="select-type-li">
                    <h3><i class="fa fa-caret-down"></i><b v-text="item.name"></b></h3>
                    <label v-for="key in item.childList">
                        <input type="radio" name="typeId" :value="key.id" v-model="agentProtocolDto.systemId" :data-name="key.name" @change="getTypeName"> {{key.name}}
                    </label>
                </div>
                <div v-if="layType==2" v-for="item in typeArr" class="select-type-li">
                    <h3><i class="fa fa-caret-down"></i><b v-text="item.name"></b></h3>
                    <label v-for="key in item.childList">
                        <input type="checkbox" :value="key.id" v-model="curOpenId" :data-name="key.name" @change="getCentName"> {{key.name}}
                    </label>
                </div>
                <div v-if="layType==3 || layType==4 || layType==5" v-for="item in typeArr" class="select-type-li">
                    <h3><i class="fa fa-caret-down"></i><b v-text="item.name"></b></h3>
                    <label v-for="key in item.childList" v-if="layType==3">
                        <input type="checkbox" :value="key.id" v-model="centId[0]" :data-name="key.name" @change="getCentName"> {{key.name}}
                    </label>
                    <label v-for="key in item.childList" v-if="layType==4">
                        <input type="checkbox" :value="key.id" v-model="centId[1]" :data-name="key.name" @change="getCentName"> {{key.name}}
                    </label>
                    <label v-for="key in item.childList" v-if="layType==5">
                        <input type="checkbox" :value="key.id" v-model="centId[2]" :data-name="key.name" @change="newCentName"> {{key.name}}
                    </label>
                </div>

                <div class="select-bot-btn">
                    <button type="button" class="btn btn-success" @click="submitType"><i class="fa fa-check"></i> 确定</button>
                    <button type="button" class="btn btn-info" @click="tipFlag=false,tipOpenFlag-false"><i class="fa fa-close"></i> 取消</button>
                </div>
            </div>
        </div>
    </div>
    <!--产品弹窗-->
    <div class="choose-tip-bg" :style="proFlag ? 'display:block' : 'display:none'">
        <div class="choose-tip-box">
            <div class="tit" style="margin-bottom: 0;"><b>选择产品</b><span @click="proFlag=false">关闭</span></div>
            <div class="panel-body panel-white" style=" height: 85%; overflow: auto">
                <form id="myForm" class="form-inline form-margin-right">
                    <div class="form-group">
                        <input type="text" class="form-control" id="name" size="32" placeholder="请输入产品名称关键字">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-primary btn-sm" onclick="search(1)">查询</button>
                    </div>
                </form>
                <div class="table-responsive">
                    <table id="myTable"
                           class="table table-hover"
                           data-url="${basePath}/admin/agent/product/queryAgentProductList?type=2"
                           data-pageSize="10,50,100" data-method="GET">
                        <thead>
                        <!-- 需要循环的字段  对应mapper文件-->
                        <tr>
                            <th  data-type="xuhao">序号</th>
                            <th  data-field="name" data-call="true">产品名称</th>
                            <th  data-field="button" data-call="true">操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbodyId">

                        </tbody>
                    </table>
                </div>
                <!-- 分页条-->
                <div class="row">
                    <div align="left" class="col-xs-6">
                        <div class="input-group">
                            <span class="input-group-addon" id="pageCount"></span> <select
                                id="pageSize" onchange="search(1)" class="form-control"
                                style="width: 100px"></select>
                        </div>
                    </div>
                    <div align="right" class="col-xs-6">
                        <ul class="pagination" id="pagination"></ul>
                    </div>
                </div>
                <div class="row" style="padding-top: 20px; text-align: center;">
                    <button type="button" class="btn btn-success" @click="submitPro"><i class="fa fa-check"></i> 选择</button>
                </div>
            </div>
        </div>
    </div>

    <script src="${basePath}/bootstrap/js/vue.min.js" type="text/javascript"></script>
    <script src="${basePath}/bootstrap/js/jquery.js" type="text/javascript"></script>
    <script src="${basePath}/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="${basePath}/bootstrap/plugin/layer/layer.js" type="text/javascript"></script>
    <script type="text/javascript"
            src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/language/zh_CN.js"></script>
    <script type="text/javascript">
        $(window).bootstrapValidator || document.write('<script src="${basePath}/bootstrap/js/bootstrapValidator.min.js"><\/script>' +
                '<script src="${basePath}/bootstrap/js/bootstrapValidator-zh_CN.js"><\/script>');
    </script>
    <script src="${basePath}/bootstrap/js/common.js" type="text/javascript"></script>
    <script type="text/javascript"
            src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
    <script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/myPage.js"></script>
    <script>

        var proArr = [];
        var nameArr = [];
        var tipOpenName = [];
        var centIdArr = [
            [],[],[]
        ];
        var oldIdArr = [
            [],[],[]
        ];
        var centNameArr = [
            [],[],[]
        ];
        var i = 0;
        var centId = [];
        var centName = [];
        var vue = new Vue({
            el: "#page-wrapper",
            data: {
                id: null,
                regPrice: /(^[1-9]\\d*(\\.\\d{1,2})?$)|(^0(\\.\\d{1,2})?$)/,
                regInt: /^[1-9]\\d*$/,
                num: 0,//首次分佣设置 体系数量
                layType: 1, //1类型 2协议开放体系 3首次分佣设置 4销售分佣设置-固定模式 5销售分佣设置-升级模式
                proIndex: 1, //产品类型数量
                backIndex: 1, //返现类型数量
                centUl: 1, //升级模式 - 代理商累计销售额
                proType: [],
                proSpec: [],
                //基本信息
                agentProtocolDto: {
                    //price: 2000
                },
                openIdArr: [],
                curOpenId: [],
                defaultSpecId: "",
                dataObj: {
                    //协议开放体系
                    curOpenId: [],
                    //产品内容
                    agentProductProjectDtoList: [
                        {
                            projectId: "",
                            containNum: "",
                            specId: "",
                            intervalDays: "",
                            validTime: "365",
                            type: 0,
                            price: "",
                            proFlag: [false,false,false,false]
                        }
                    ],
                    //图文
                    agentProtocolImageTextDtoList: [
                        {
                            path: "",
                            sort: 1,
                            type: 1,
                            id: 0
                        }
                    ],
                    //返现
                    agentProtocolYieldRatioDtoList: [
                        {
                            cashbackTime: "",
                            cashbackRatio: "",
                            cashbackWithdrawal: "",
                            ratioFlag: [false,false,false],
                            yieldFlag: false
                        }
                    ],
                    //分佣
                    agentProtocolCommissionDtoList: []

                },
                //升级模式
                centIndex: 0,
                promoteList: [],

                //选择类型
                tipFlag: false,
                typeId: "",
                typeName: "",
                tipOpenFlag: false, //协议开放体系
                tipOpenId: [],
                tipOpenName: [],
                typeArr: [],
                //产品类型
                proFlag: false,
                curProId: [],
                curProName: [],
                //分佣体系
                centType: 0,
                centId: [
                    [],[],[]
                ],
                firstCent: [],
                fixedCent: [],
                upgradeCent: [],
                totalValueFlag: false, //校验首次分佣佣金总和

            },
            created: function(){
                layer.load(2);
                var _this = this;
                //如果是编辑页面 执行数据获取
                if(window.location.href.indexOf("=")!="-1"){
                    var cur = window.location.href.split("=");
                    var id = cur[cur.length-1];
                    this.id = id;
                    if(id){
                        $.ajax({
                            url: '${basePath}/admin/agent/protocol/getAgentProtocolInfo',
                            type: 'GET',
                            dataType: 'json',
                            data: {
                                id: id
                            },
                            success: function(data){
                                _this.dataObj = data.result;

                                //返现
                                var ratioDto = data.result.agentProtocolYieldRatioDtoList;
                                for(var i=0,len=ratioDto.length;i<len;i++){
                                    _this.dataObj.agentProtocolYieldRatioDtoList[i].ratioFlag = [false,false,false]
                                }

                                //产品
                                var proDto = data.result.agentProductProjectDtoList;
                                for(var i=0,len=proDto.length;i<len;i++){
                                    _this.dataObj.agentProductProjectDtoList[i].proFlag = [false,false,false,false];
                                }

                                if(data.result.agentProtocolDto){
                                    _this.agentProtocolDto = data.result.agentProtocolDto;
                                }
                                var curProArr = data.result.agentProtocolProductDtoList;
                                for(var i=0,len=curProArr.length;i<len;i++){
                                    _this.curProName.push(curProArr[i].productName);
                                    _this.curProId.push(curProArr[i].productId);
                                    proArr.push(curProArr[i].productId);
                                    nameArr.push(curProArr[i].productName);
                                }
                                var curSystemArr = data.result.agentProtocolSystemDtoList;
                                for(var i=0,len=curSystemArr.length;i<len;i++){
                                    _this.tipOpenName.push(curSystemArr[i].systemName);
                                    _this.openIdArr.push(curSystemArr[i].systemId);
                                    _this.curOpenId.push(curSystemArr[i].systemId);
                                }

                                //模式 centType
                                var comDtoList = data.result.agentProtocolCommissionDtoList;

                                //升级模式data
                                var newComDto = [];
                                for(var i=0,len=comDtoList.length;i<len;i++){
                                    //首次分佣
                                    if(comDtoList[i].type==1){
                                        oldIdArr[0].push(comDtoList[i].systemId);
                                    }
                                    //销售分佣
                                    else{
                                        if(comDtoList[i].pattern==1){
                                            _this.centType = 1
                                            oldIdArr[1].push(comDtoList[i].systemId);
                                        }
                                        else if(comDtoList[i].pattern==2){
                                            _this.centType = 2;
                                            newComDto.push(comDtoList[i]);
                                        }
                                        else{
                                            _this.centType = 0
                                        }
                                    }
                                }

                                var sanm = [];
                                //console.log(JSON.stringify(newComDto))
                                var j = 0;
                                for(var i=0,len=newComDto.length;i<len;i++){
                                    if(i>0 && newComDto[i].promoteId==newComDto[i-1].promoteId){
                                        //console.log(i);
                                        //console.log(JSON.stringify(sanm));
                                        sanm[j-1].centList.push(newComDto[i]);
                                        sanm[j-1].oldIdArr.push(newComDto[i].systemId);
                                    }
                                    else{
                                        var centList = [];
                                        centList.push(newComDto[i]);
                                        var oldIdList = [];
                                        oldIdList.push(newComDto[i].systemId);
                                        var sanmObj = {
                                            promoteId: newComDto[i].promoteId,
                                            saleDto: {
                                                lowMoney: newComDto[i].lowMoney,
                                                highMoney: newComDto[i].highMoney
                                            },
                                            centList: centList,
                                            centId: [],
                                            centName: [],
                                            oldIdArr: oldIdList
                                        };
                                        sanm.push(sanmObj);
                                        j++;
                                    }
                                }
                                //console.log(JSON.stringify(sanm));
                                if(sanm.length>0){
                                    _this.promoteList = sanm;
                                }
                                else{
                                    _this.promoteList = [
                                        {
                                            saleDto: {
                                                lowMoney: "",
                                                highMoney: ""
                                            },
                                            centList: [],
                                            centId: [],
                                            centName: [],
                                            oldIdArr: [],
                                            tipFlag: false,
                                            tipShow: false,
                                            minValueFlag: false,
                                            maxValueFlag: false
                                        }
                                    ]
                                }

                                //分佣
                                _this.dataObj.agentProtocolCommissionDtoList = comDtoList;

                            },
                            error: function(){
                                console.log("error")
                            }
                        }).done(function(){
                            $("#Form").data("bootstrapValidator").resetForm();
                        })
                    }
                }
                else{
                    _this.promoteList = [
                        {
                            saleDto: {
                                lowMoney: "",
                                highMoney: ""
                            },
                            centList: [],
                            centId: [],
                            centName: [],
                            oldIdArr: [],
                            tipFlag: false,
                            tipShow: false,
                            minValueFlag: false,
                            maxValueFlag: false
                        }
                    ]
                }
                setTimeout(function(){
                        //获取体系
                        $.ajax({
                            url: '${basePath}/admin/agent/system/queryAgentSystem',
                            type: 'GET',
                            dataType: 'json',
                            data: {},
                            success: function(data){
                                //console.log(data)
                                _this.typeArr = data;
                            },
                            error: function(){
                                console.log("error")
                            },
                            complete: function(){
                                //获取类型
                                $.ajax({
                                    url: '${basePath}/admin/agent/product/typeList',
                                    type: 'GET',
                                    dataType: 'json',
                                    data: {},
                                    success: function (data) {
                                        if (data.code == 0) {
                                            _this.proType = data.result.baseProductList;
                                            _this.proSpec = data.result.motorcycleList;
                                            if(data.result.motorcycleList){
                                                _this.defaultSpecId = data.result.motorcycleList[0].motorcycleId;
                                                if(data.result.agentProductProjectDtoList){
                                                    _this.dataObj.agentProductProjectDtoList[0].specId = data.result.motorcycleList[0].motorcycleId;
                                                }
                                            }
                                        }
                                    },
                                    error: function () {
                                        console.log("error")
                                    },
                                    complete: function(){
                                        layer.closeAll('loading');
                                    }
                                })
                            }
                        })
                },1000)

            },
            methods: {
                //上传图片
                vueImg: function(e,type,index){
                    //type: goods / icon ...
                    var file = e.target.files[0];
                    var param = new FormData(); //创建form对象
                    //param.append('file',file,file.name);//通过append向form对象添加数据
                    param.append('image',file);//添加form表单中其他数据
                    var dto = this.dataObj.agentProtocolImageTextDtoList;

                    if(getPhotoSize(e.target,3)) {
                        var objUrl = getObjectURL(e.target.files[0]);
                        getImageWidth(objUrl, function (w, h) {
                            var size = "?" + w + "/" + h;
                            if (w > 750) {
                                alert("图片尺寸太大，请处理成不大于750px");
                                return false;
                            }
                            else {

                                $.ajax({
                                    url: '${basePath}/upload/' + type,
                                    type: 'POST',
                                    data: param,
                                    cache: false,
                                    contentType: false,
                                    processData: false,
                                    success: function (data) {
                                        console.log(data)
                                        dto[index].path = data+size;
                                    },
                                    error: function () {
                                        console.log("error")
                                    }
                                });

                            }
                        })
                    }

                },
                //校验产品内容
                checkNum: function(e,index,type){
                    var dto = this.dataObj.agentProductProjectDtoList;
                    var val = e.target.value;
                    if(type==3){
                        if(val && !regInt.test(val)){
                            Vue.set(dto[index].proFlag,type,true);
                        }
                        else{
                            Vue.set(dto[index].proFlag,type,false);
                        }
                    }
                    else{
                        if(!val || !regInt.test(val)){
                            Vue.set(dto[index].proFlag,type,true);
                        }
                        else{
                            Vue.set(dto[index].proFlag,type,false);
                        }
                    }
                },
                //校验返现
                checkTime: function(e,index,type){
                    var val = e.target.value;
                    var dto = this.dataObj.agentProtocolYieldRatioDtoList;
                    if(!regInt.test(val)){
                        Vue.set(dto[index].ratioFlag,type,true);
                    }
                    else{
                        Vue.set(dto[index].ratioFlag,type,false);
                    }
                },
                checkRatio: function(e,index,type){
                    var val = e.target.value;
                    var dto = this.dataObj.agentProtocolYieldRatioDtoList;
                    if(!regPrice.test(val)){
                        Vue.set(dto[index].ratioFlag,type,true);
                    }
                    else{
                        Vue.set(dto[index].ratioFlag,type,false);
                    }
                },
                checkWithdrawal: function(e,index,type){
                    var val = e.target.value;
                    var dto = this.dataObj.agentProtocolYieldRatioDtoList;
                    if(!regInt.test(val)){
                        Vue.set(dto[index].ratioFlag,type,true);
                    }
                    else{
                        Vue.set(dto[index].ratioFlag,type,false);
                    }
                },
                //升级模式校验
                checkPromote: function(index){
                    var dto = this.promoteList;
                    for(var i=0,len=dto.length;i<len;i++) {
                        for(var j=0,len=dto[i].centList.length;j<len;j++){
                            if (!regPrice.test(dto[i].centList[j].value)) {
                                dto[i].centList[j].valueFlag = true;
                            }
                            else {
                                dto[i].centList[j].valueFlag = false;
                            }
                        }
                    }
                },
                //固定模式校验
                checkValue: function(index){
                    var dto = this.dataObj.agentProtocolCommissionDtoList;
                    for(var i=0,len=dto.length;i<len;i++) {
                        if(dto[i].type==2 && dto[i].pattern==1) {
                            if (!regPrice.test(dto[i].value)) {
                                dto[i].valueFlag = true;
                            }
                            else {
                                dto[i].valueFlag = false;
                            }
                        }
                    }
                },
                //校验首次分佣总金额
                checkTotalValue: function(index){
                    var _this = this;
                    var price = +_this.agentProtocolDto.price;
                    var dto = _this.dataObj.agentProtocolCommissionDtoList;
                    var itemVal = 0;
                    var totalVal = 0;
                    for(var i=0,len=dto.length;i<len;i++){
                        if(dto[i].type==1){
                            //百分比
                            if(dto[i].mode==1){
                                itemVal = +dto[i].value;
                                itemVal = itemVal * 0.01 * price;
                            }
                            //元
                            else if(dto[i].mode==2){
                                itemVal = +dto[i].value;
                            }
                            totalVal = totalVal + itemVal;
                            if(!regPrice.test(dto[i].value)){
                                dto[i].valueFlag = true;
                            }
                            else{
                                dto[i].valueFlag = false;
                            }
                            //console.log(itemVal)
                        }

                    }
                    if(totalVal > price){
                        _this.totalValueFlag = true
                    }
                    else{
                        _this.totalValueFlag = false
                    }
                    //console.log(totalVal)
                },
                //校验代理商销售额
                checkTipFlag: function(index){
                    var checkData = this.promoteList;
                    if(index > 0 && parseInt(checkData[index-1].saleDto.highMoney) >= parseInt(checkData[index].saleDto.lowMoney)){
                        checkData[index].tipShow = true;
                    }
                    else{
                        checkData[index].tipShow = false;
                    }
                    if(parseInt(checkData[index].saleDto.highMoney) <= parseInt(checkData[index].saleDto.lowMoney)){
                        checkData[index].tipFlag = true;
                    }
                    else{
                        checkData[index].tipFlag = false;
                    }
                    if(checkData[index].saleDto.lowMoney==0 || !regPrice.test(checkData[index].saleDto.lowMoney)){
                        checkData[index].minValueFlag = true;
                    }
                    else{
                        checkData[index].minValueFlag = false;
                    }
                },
                checkShowFlag: function(index){
                    var checkData = this.promoteList;
                    if(parseInt(checkData[index].saleDto.highMoney) <= parseInt(checkData[index].saleDto.lowMoney)){
                        checkData[index].tipFlag = true;
                    }
                    else{
                        checkData[index].tipFlag = false;
                    }
                    if(checkData[index].saleDto.highMoney==0 || !regPrice.test(checkData[index].saleDto.highMoney)){
                        checkData[index].maxValueFlag = true;
                    }
                    else{
                        checkData[index].maxValueFlag = false;
                    }
                },
                //图文
                addText: function(type,index){
                    //顶部添加
                    if(type==1){
                        var newObj = {
                            path: '',
                            sort: 0,
                            type: 1,
                            id: i
                        };
                        this.dataObj.agentProtocolImageTextDtoList.unshift(newObj);
                    }
                    //根据index添加
                    else if(type==2){
                        var newObj = {
                            path: '',
                            sort: 0,
                            type: 1,
                            id: i
                        };
                        this.dataObj.agentProtocolImageTextDtoList.splice((index+1),0,newObj);
                    }
                    i++;
                },
                addImg: function(type,index){
                    if(type==1){
                        var newObj = {
                            path: '',
                            sort: 0,
                            type: 2,
                            id: i
                        }
                        this.dataObj.agentProtocolImageTextDtoList.unshift(newObj);
                    }
                    else if(type==2){
                        var newObj = {
                            path: '',
                            sort: 0,
                            type: 2,
                            id: i
                        };
                        this.dataObj.agentProtocolImageTextDtoList.splice((index+1),0,newObj);
                    }
                    i++
                },
                removeBox: function(type,index){
                    this.dataObj.agentProtocolImageTextDtoList.splice(index,1)
                },
                //新增类型
                addType: function(){
                    var _this = this;
                    var newObj = {
                        projectId: 9,
                        containNum: "",
                        specId: _this.defaultSpecId,
                        intervalDays: "",
                        validTime: "365",
                        type: 0,
                        price: "",
                        proFlag: [false,false,false,false]
                    };
                    this.dataObj.agentProductProjectDtoList.push(newObj);
                },
                removeType: function(obj){
                    this.dataObj.agentProductProjectDtoList.splice(obj,1)
                },
                //新增返现
                addBack: function(){
                    var newObj = {
                        cashbackTime: "",
                        cashbackRatio: "",
                        cashbackWithdrawal: "",
                        ratioFlag: [false,false,false],
                        yieldFlag: false
                    };
                    this.dataObj.agentProtocolYieldRatioDtoList.push(newObj);
                },
                removeBack: function(obj){
                    this.dataObj.agentProtocolYieldRatioDtoList.splice(obj,1)
                },
                //提交
                submitForm: function(){
                    var _this = this;
                    var bsVal = $("#Form").data('bootstrapValidator');
                    bsVal.validate();
                    var url = "${basePath}/admin/agent/protocol/createAgentProtocol";
                    if(this.id){
                        url = '${basePath}/admin/agent/protocol/updateAgentProtocol';
                    }

                    //校验产品内容
                    var dto = this.dataObj.agentProductProjectDtoList;
                    var proFlag = true;
                    if(dto){
                        for(var i=0,len=dto.length;i<len;i++){
                            if(dto[i].projectId && (!dto[i].containNum || !regInt.test(dto[i].containNum))){
                                Vue.set(dto[i].proFlag,0,true);
                                proFlag = false;
                            }
                            //代金券规格
                            else if(dto[i].projectId==11 && !dto[i].price){
                                Vue.set(dto[i].proFlag,1,true);
                                proFlag = false;
                            }
                            //汽摩券、房车券
                            else if(dto[i].projectId==10 || dto[i].projectId==9 || dto[i].projectId==11){
                                //有效期
                                if(!dto[i].validTime || !regInt.test(dto[i].validTime)){
                                    Vue.set(dto[i].proFlag,2,true);
                                    proFlag = false;
                                }
                                //生效日
                                else if(dto[i].intervalDays && !regInt.test(dto[i].intervalDays)){
                                    Vue.set(dto[i].proFlag,3,true);
                                    proFlag = false;
                                }
                            }
                            else{
                                Vue.set(dto[i].proFlag,0,false);
                                Vue.set(dto[i].proFlag,1,false);
                                Vue.set(dto[i].proFlag,2,false);
                                Vue.set(dto[i].proFlag,3,false);
                                proFlag = true;
                            }
                        }
                    }
                    //校验返现的完整
                    var ratioDto = this.dataObj.agentProtocolYieldRatioDtoList;
                    var ratioFlag = true;
                    if(ratioDto){
                        for(var i=0,len=ratioDto.length;i<len;i++){
                            var totalLen = ratioDto[i].cashbackTime.length + ratioDto[i].cashbackRatio.length + ratioDto[i].cashbackWithdrawal.length;
                            if(totalLen > 0 && totalLen < 3){
                                ratioDto[i].yieldFlag = true;
                                ratioFlag = false;
                            }
                            else{
                                ratioDto[i].yieldFlag = false;
                                ratioFlag = true;
                            }
                        }
                    }

                    //校验升级模式
                    var promoteList = this.promoteList;
                    var promoteFlag = true;
                    if(promoteList.length){
                        for(var i=0,len=promoteList.length;i<len;i++){
                            if(promoteList[i].tipFlag || promoteList[i].tipShow || promoteList[i].minValueFlag || promoteList[i].maxValueFlag){
                                promoteFlag = false
                            }
                            else{
                                promoteFlag = true
                            }
                        }
                    }

                    if (bsVal.isValid()) {
                        if(proFlag && ratioFlag && !_this.totalValueFlag && promoteFlag){
                            layer.load(2);
                            $.ajax({
                                type: 'POST',
                                dataType: 'json',
                                url: url,
                                data: $("#Form").serialize(),
                                success: function (data) {
                                    if (data.code == '0') {
                                        layer.alert('操作成功', {
                                            icon: 1
                                        }, function () {
                                            window.location.href = '${basePath}/admin/agent/protocol';
                                        })
                                    } else {
                                        layer.alert(data.desc, {
                                            icon: 5
                                        });
                                    }
                                },
                                error: function () {
                                    layer.alert('系统错误', {
                                        icon: 5
                                    });
                                },
                                complete: function(){
                                    layer.closeAll('loading');
                                }
                            });
                        }
                    }
                    else {
                        var smallTop = $("small:visible").eq(0).offset().top - 50;
                        $("html,body").animate({scrollTop: smallTop}, 300);
                    }
                },
                //弹窗选择类型
                getCentName: function(e){
                    if(this.layType==2){
                        //console.log(this.openIdArr)
                        var val = parseInt(e.target.value);
                        if(e.target.checked){
                            if(this.openIdArr.indexOf(val)=="-1"){
                                this.tipOpenName.push(e.target.dataset.name);
                                this.openIdArr.push(val);
                            }
                        }
                        else if(this.openIdArr.indexOf(val)!="-1"){
                            var index = this.openIdArr.indexOf(val);
                            this.tipOpenName.splice(index,1);
                            this.openIdArr.splice(index,1);
                        }
                    }
                    else{
                        var index = this.layType-3;
                        if(e.target.checked){
                            centNameArr[index].push(e.target.dataset.name);
                            centIdArr[index].push(e.target.value);
                        }
                        else if(centIdArr[index].indexOf(e.target.value)!="-1"){
                            var idIndex = centIdArr[index].indexOf(e.target.value);
                            centNameArr[index].splice(idIndex,1);
                            centIdArr[index].splice(idIndex,1);
                        }
                    }

                },
                //弹窗确定
                submitType: function(){
                    var layType = this.layType;
                    //协议开放体系
                    if(layType==2){
                        //this.openIdArr = this.curOpenId;
                    }
                    //首次分佣设置
                    else if(layType==3){
                        var index = this.layType-3;
                        this.num = centIdArr[index].length;
                        //console.log(oldIdArr[index]);
                        for(var i=0,len=centIdArr[index].length;i<len;i++){
                            var newObj = {
                                systemName: centNameArr[index][i],
                                type: 1,
                                systemId: centIdArr[index][i],
                                mode: 1,
                                value: "",
                                valueFlag: false
                            };
                            if(oldIdArr[index].indexOf(parseInt(centIdArr[index][i])) == "-1") {
                                this.dataObj.agentProtocolCommissionDtoList.push(newObj);
                                oldIdArr[index].push(parseInt(centIdArr[index][i]));
                            }
                        }
                    }
                    //固定模式
                    else if(layType==4){
                        var index = this.layType-3;
                        //console.log(JSON.stringify(centIdArr[index]));
                        for(var i=0,len=centIdArr[index].length;i<len;i++){
                            var newObj = {
                                systemName: centNameArr[index][i],
                                type: 2,
                                systemId: centIdArr[index][i],
                                mode: 1,
                                pattern: 1,
                                value: ""
                            };
                            if(oldIdArr[index].indexOf(parseInt(centIdArr[index][i])) == "-1") {
                                this.dataObj.agentProtocolCommissionDtoList.push(newObj);
                                oldIdArr[index].push(parseInt(centIdArr[index][i]));
                            }
                        }
                    }
                    else if(layType==5){
                        var index = this.centIndex;
                        var centId = this.promoteList[index].centId;
                        //console.log(JSON.stringify(this.promoteList[index].oldIdArr))
                        for(var i=0,len=centId.length;i<len;i++){
                            var newObj = {
                                systemName: this.promoteList[index].centName[i],
                                systemId: centId[i],
                                value: "",
                                mode: 1
                            };
                            if(this.promoteList[index].oldIdArr.indexOf(parseInt(centId[i])) == "-1") {
                                this.promoteList[index].centList.push(newObj);
                                this.promoteList[index].oldIdArr.push(parseInt(centId[i]))
                            }
                        }
                    }
                    this.tipFlag = false;
                    this.tipOpenFlag = false;
                    //console.log(this.dataObj.agentProtocolCommissionDtoList)
                },
                //删除首次分佣
                removeCent: function(obj,id){
                    this.dataObj.agentProtocolCommissionDtoList.splice(obj,1)
                    var index = this.layType-3;
                    if(id){
                        var idIndex = this.centId[index].indexOf(id);
                        this.centId[index].splice(idIndex,1);
                        centIdArr[index].splice(idIndex,1);
                        oldIdArr[index].splice(idIndex,1);
                        centNameArr[index].splice(idIndex,1);
                    }
                },

                //获取类型名
                getTypeName: function(e){
                    this.agentProtocolDto.systemName = e.target.dataset.name;
                },
                //获取协议开放体系名
                getTipOpen: function(e){
                    if(e.target.checked){
                        tipOpenName.push(e.target.dataset.name);
                    }
                },
                //新增代理商累计
                addCentBox: function(){
                    var newObj =  {
                        saleDto: {
                            lowMoney: "",
                            highMoney: ""
                        },
                        centList: [],
                        centId: [],
                        centName: [],
                        oldIdArr: [],
                        tipFlag: [],
                        tipShow: []
                    };
                    this.promoteList.push(newObj);
                },
                //删除
                removeCentBox: function(obj){
                    this.promoteList.splice(obj,1);
                },
                //升级模式体系
                addNewCent: function(obj){
                    this.centId[2] = [];
                    this.centIndex = obj;
                    this.layType = 5;
                    this.tipFlag = true;
                },
                removeNewCent: function(index,i){
                    this.promoteList[index].centList.splice(i,1);
                    this.promoteList[index].oldIdArr.splice(i,1);
                },
                newCentName: function(e){
                    var index = this.centIndex;

                    if(e.target.checked){
                        this.promoteList[index].centName.push(e.target.dataset.name);
                        this.promoteList[index].centId.push(e.target.value);
                    }
                    else if(this.promoteList[index].centId.indexOf(e.target.value)!="-1"){
                        var idIndex = this.promoteList[index].centId.indexOf(e.target.value);
                        this.promoteList[index].centName.splice(idIndex,1);
                        this.promoteList[index].centId.splice(idIndex,1);
                    }
                },

                //弹窗选择
                submitPro: function(){
                    console.log(proArr)
                    console.log(nameArr)
                    this.curProId = proArr;
                    this.curProName = nameArr;
                    this.proFlag = false;
                },
                //产品重置
                proReset: function(){
                    proArr = [];
                    nameArr = [];
                    this.curProId = [];
                    this.curProName = [];
                    search(1);
                }

        },
            mounted: function(){
                //表单验证
                $('#Form').bootstrapValidator({
                    fields: {
                        'agentProtocolDto.name': {
                            trigger: "focus blur",
                            validators: {
                                notEmpty: {
                                    message: '请输入协议名称'
                                }
                            }
                        },
                        'agentProtocolDto.cover': {
                            trigger: "change",
                            validators: {
                                notEmpty: {
                                    message: '请上传协议封面'
                                }
                            }
                        },
                        'agentProtocolDto.price': {
                            validators: {
                                regexp: {
                                    regexp: regPrice,
                                    message: '请输入最多两位小数的数字'
                                }
                            }
                        },
                        'agentProtocolDto.contractName': {
                            trigger: "focus blur",
                            validators: {
                                notEmpty: {
                                    message: '请输入合同名称'
                                }
                            }
                        },
                        'agentProtocolDto.contractUrl': {
                            trigger: "change",
                            validators: {
                                notEmpty: {
                                    message: '请上传合同'
                                }
                            }
                        }
                    }
                });
            }
        });

        //循环列表数据以及操作按钮
        function tableCallBack(data, id){
            if(id == 'button') {//增加操作按钮
                var _button = '<input data-id="'+data.id+'" type="checkbox" name="'+data.name+'" value="'+data.id+'" onchange="selectPro(this);"> ';
                return _button;
            }
            else {
                if(data[id] == null || data[id] == ''){
                    return '';
                }else{
                    return data[id];
                }
            }
        }

        function selectPro(obj){
            console.log(proArr)
            if($(obj).is(":checked")){
                if(proArr.indexOf(parseInt(obj.value))=="-1"){
                    proArr.push(parseInt(obj.value));
                    nameArr.push(obj.name);
                }
            }
            else{
                var index = proArr.indexOf(obj.value);
                if(index!="-1"){
                    proArr.splice(index,1);
                    nameArr.splice(index,1);
                }
            }
        }


        function getImageWidth(url,callback){
            var img = new Image();
            img.src = url;
            // 如果图片被缓存，则直接返回缓存数据
            if(img.complete){
                callback(img.width, img.height);
            }
            // 完全加载完毕的事件
            else{
                img.onload = function(){
                    callback(img.width, img.height);
                }
            }
        }
        //判断图片大小
        function getPhotoSize(obj,imgSize){
            var photoExt = obj.value.substring(obj.value.lastIndexOf(".")+1).toLowerCase();//获得文件后缀名
            if(photoExt!='jpg'&&photoExt!='jpeg'&&photoExt!='bmp'&&photoExt!='png'&&photoExt!='gif'){
                alert("图片格式必须是.jpg/.jpeg/.bmp/.png!");
                return false;
            }
            var imgSize = imgSize || 3;
            var fileSize = 0;
            var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
            if (isIE && !obj.files) {
                var filePath = obj.value;
                var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
                var file = fileSystem.GetFile (filePath);
                fileSize = file.Size;
            }else {
                fileSize = obj.files[0].size;
            }
            fileSize=Math.round(fileSize/1024*100)/100; //单位为KB
            if(fileSize>imgSize*1024){
                alert("图片最大为"+imgSize+"M，请重新上传!");
                return false;
            }
            return fileSize;
        }
        function getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }
    </script>
</body>
</html>